<template>
	<!-- 推荐有礼 -->
	<view>
		<view class="recommend-bgimg">
			<image :src="imglink + 'member/share_image_gift.png'" mode=""></image>
		</view>
		<view class="recommend-contain">
			<view class="recommend-coupon">
				<view class="recommend-coupon-title">
					好课宝- <text>扩课宝365天VIP会员</text>
				</view>
				<view class="recommend-coupon-tip">
					为好友省￥200，自己赚￥89.1
				</view>
				<view class="recommend-coupon-content">
					<view class="recommend-coupon-details">
						<view class="" style="color: #666666;text-decoration: line-through;">¥1499</view>
						<view class="">原价(元)</view>
					</view>
					<view class="recommend-coupon-line"></view>
					<view class="recommend-coupon-details">
						<view class="">¥299</view>
						<view class="">优惠价(元)</view>
					</view>
					<view class="recommend-coupon-line"></view>
					<view class="recommend-coupon-details" style="position: relative;">
						<view class="">-¥200</view>
						<view class="" style="color: #999999;font-size: 24upx;">渠道减免(元)</view>
						<text class="coupon-details-top">优惠减免</text>
					</view>
					<view class="recommend-coupon-line"></view>
					<view class="recommend-coupon-details">
						<view class="">¥99</view>
						<view class="">成交价(元)</view>
					</view>
				</view>
				<view class="gain-coupon">
					<view class="">赚取拥金(元)</view>
					<view class="">-¥89.1</view>
				</view>
				<view class="give-other-coupon">
					立刻给好友发减¥200优惠券
				</view>
				<view class="give-other-coupon-tip">
					推荐1人赚<text>￥89.1</text>，推荐5人赚<text>￥444.5</text>
				</view>
			</view>
			<view class="data-statistics">
				<view class="data-statistics-title">
					数据统计
				</view>
				<view class="data-statistics-content">
					<view class="recommend-coupon-details">
						<view class="" style="color: #333333;">10</view>
						<view class="">已邀请好友(个)</view>
					</view>
					<view class="recommend-coupon-line"></view>
					<view class="recommend-coupon-details">
						<view class="" style="color: #333333;">10</view>
						<view class="">已成交好友(个)</view>
					</view>
					<view class="recommend-coupon-line"></view>
					<view class="recommend-coupon-details">
						<view class="" style="color: #333333;">¥189.1</view>
						<view class="" style="color: #999999;font-size: 24upx;">佣金(元)</view>
					</view>
				</view>
			</view>
			<view class="friend-msg">
				<view class="friend-msg-title">
					<view class="">我的好友</view>
					<view class="">加入时间</view>
					<view class="">购买状态</view>
				</view>
				<view class="friend-msg-content">
					<view class="friend-msg-content-left">
						<image :src="imglink + 'home/member-img.png'" mode=""></image>
						<text>爱笑的鱼</text>
					</view>
					<view class="friend-msg-content-right">
						<view class="">2020-01-23 15:23:36</view>
						<view class="unpurchased">未购买</view>
					</view>
				</view>
				<view class="friend-msg-content">
					<view class="friend-msg-content-left">
						<image :src="imglink + 'home/member-img.png'" mode=""></image>
						<text>刘美丽</text>
					</view>
					<view class="friend-msg-content-right">
						<view class="">2020-01-23 15:23:36</view>
						<view class="purchased">已购买</view>
					</view>
				</view>
				<view class="friend-msg-content">
					<view class="friend-msg-content-left">
						<image :src="imglink + 'home/member-img.png'" mode=""></image>
						<text>刘美丽</text>
					</view>
					<view class="friend-msg-content-right">
						<view class="">2020-01-23 15:23:36</view>
						<view class="purchased">已购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imglink: this.$store.state.imgLink,
				store_id:""
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
		}
	}
</script>

<style>
	page{
		background: linear-gradient(#F93D2F,#F99466);
		padding-bottom: 40upx;
	}
	.recommend-bgimg{
		width: 686upx;
		height: 578upx;
		margin: 32upx auto;
	}
	.recommend-bgimg>image{
		width: 100%;
		height: 100%;
	}
	.recommend-contain{
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.recommend-coupon{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		background: #FFFFFF;
		border: 4upx solid #FFDC34;
		border-radius: 20upx;
		box-shadow: 0 4upx 22upx rgba(248, 41, 45, 0.39);
	}
	.recommend-coupon-title{
		text-align: center;
		color: #333333;
		font-size: 30upx;
	}
	.recommend-coupon-title>text{
		color: #FF8B46;
	}
	.recommend-coupon-tip{
		width: 94%;
		height: 48upx;
		line-height: 48upx;
		margin: 0 auto;
		color: #FF391F;
		font-size: 24upx;
		text-align: center;
		margin-top: 14upx;
		background: rgba(255, 57, 31, 0.15);
		border-radius: 24upx;
	}
	.recommend-coupon-content,.data-statistics-content{
		margin-top: 50upx;
		display: flex;
		justify-content: space-between;
	}
	.recommend-coupon-details{
		flex-grow: 1;
		text-align: center;
	}
	.recommend-coupon-details>view:first-child{
		color: #FF391F;
		font-size: 36upx;
	}
	.recommend-coupon-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.recommend-coupon-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 22upx;
	}
	.coupon-details-top{
		display: inline-block;
		width: 108upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 22upx;
		background: #FF391F;
		border-radius: 14upx 14upx 14upx 0;
		position: absolute;
		top: -30upx;right: -12upx;
	}
	.gain-coupon{
		width: 100%;
		margin-top: 40upx;
		padding: 32upx 24upx 30upx 20upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-top: 1upx solid #DEDEDE;
		border-bottom: 1upx solid #DEDEDE;
	}
	.gain-coupon>view:first-child{
		color: #333333;
		font-size: 30upx;
	}
	.gain-coupon>view:last-child{
		color: #FF391F;
		font-size: 34upx;
	}
	.give-other-coupon{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		margin: 0 auto;
		margin-top: 30upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.give-other-coupon-tip{
		text-align: center;
		color: #999999;
		font-size: 24upx;
		margin-top: 20upx;
	}
	.give-other-coupon-tip>text{
		color: #FF391F;
	}
	.data-statistics{
		width: 100%;
		padding: 30upx 0 40upx;
		background: #FFFFFF;
		border: 4upx solid #FFDC34;
		border-radius: 20upx;
		box-shadow: 0 4upx 22upx rgba(248, 41, 45, 0.39);
		margin-top: 30upx;
	}
	.data-statistics-title{
		color: #333333;
		font-size: 30upx;
		text-align: center;
	}
	.friend-msg{
		width: 100%;
		padding: 30upx 20upx;
		box-sizing: border-box;
		margin-top: 20upx;
		border: 4upx solid #FFDC34;
		border-radius: 20upx;
		background: #FFFFFF;
		box-shadow: 0 4upx 22upx rgba(248, 41, 45, 0.39);
	}
	.friend-msg-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		color: #FFFFFF;
		font-size: 24upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
	}
	.friend-msg-title>view:nth-child(1){
		margin-left: 20upx;
	}
	.friend-msg-title>view:nth-child(2){
		margin-left: 112upx;
	}
	.friend-msg-title>view:nth-child(3){
		margin-left: 216upx;
	}
	.friend-msg-content{
		width: 100%;
		padding:  16upx 0 20upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
		justify-content: space-between;
	}
	.friend-msg-content-left{
		display: flex;
		width: 202upx;
	}
	.friend-msg-content-left>image{
		width: 80upx;
		height: 80upx;
	}
	.friend-msg-content-left>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 10upx;
		line-height: 80upx;
	}
	.friend-msg-content-right{
		display: flex;
		font-size: 28upx;
		margin-left: 28upx;
		line-height: 80upx;
		flex-grow: 2;
		justify-content: space-between;
		color: #666666;
	}
	.unpurchased{
		color: #FF391F;
	}
	.purchased{
		color: #666666;
	}
</style>
